<template>
  <uni-nav-bar title="充值订单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package space-between">
    <view class="direction-start" style="width:82%;">
      <view>{{textList[0].name}}</view>
      <view class="center" style="flex-wrap: wrap;">
        <view class="but" v-for="(item,index) in textList" :key='index'
          :style="{display:index===0||!item.name?'none':'block'}" @click="del(item.value)">
          {{item.name}}
          <uni-icons type="closeempty" size="15"></uni-icons>
        </view>
      </view>
    </view>
    <view class="center" @click="popupOpen()">筛选<uni-icons type="list" size="20"
        style="margin-left: 10rpx;"></uni-icons></view>
  </view>
  <view class="package">
    <view class="space-between">
      <view>充值金额</view>
      <view>{{money}}元</view>
    </view>
    <view class="space-between top">
      <view>单数</view>
      <view>{{total}}单</view>
    </view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package" style="margin-top:0px;" v-for="item in orderLists" :key="item.order_id">
      <view class="space-between">
        <view>订单{{item.order_sn}}（{{item.order_id}}）</view>
        <view style="color:#2995FA;">已充值</view>
      </view>
      <view class="space-between top">
        <view>{{item.driver_name}}（{{item.driver_id}}）</view>
        <view>{{item.money}}</view>
      </view>
      <view class="space-between top">
        <view>{{item.paytime}}</view>
      </view>
    </view>
  </scroll-view>
  <!-- 筛选弹框 -->
  <uni-popup ref="popup" type="bottom">
    <view class="popups">
      <input class="uni-input" confirm-type="search" placeholder="搜索制单人/手机号" v-model="makeOrder" />
      <view class="tos">支付时间</view>
      <view class="center" style="flex-wrap: wrap;">
        <text v-for="(item) in list" :key='item.name' class="bur" @click="changeDate(item.name,item.value)"
          :style="{background:dataTimes===item.name?'#1B91FF':'#ECF0F6',color:dataTimes===item.name?'#fff':'#666'}">{{item.name}}</text>
        <text class="bur" :style="{background:single?'#1B91FF':'#ECF0F6',color:single?'#fff':'#666'}">
          <uni-datetime-picker v-model="single" type="daterange" @change="maskClick">自定义</uni-datetime-picker>
        </text>
      </view>
      <view class="space-between">
        <view class="sure" @click="submit('1')">重置</view>
        <view class="sure" style="background-color:#1B91FF;color:#fff;" @click="submit('2')">确认</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { showLoading } from '@/utils/prompt';
  import { navBack } from '@/utils/navigator';
  import { toPublish } from '@mqtt';
  import { getOrderRechargeList } from '@/gql/administrator';
  import { ref, onMounted } from 'vue';
  /**
   * 充值订单
   * @property {Array} list 时间筛选列表
   * @property {Null} popup 筛选弹框
   * @property {String} makeOrder 搜索制单人/手机号
   * @property {String} orderNum 订单号
   * @property {String} dataTimes 初始化筛选时间
   * @property {String} time 初始化筛选状态
   * @property {String} single 时间段
   * @property {String} start 开始时间
   * @property {String} end 结束时间
   * @property {Array} textList 筛选列表信息
   * @property {Array} orderLists 订单列表
   * @property {Number} lastPage 总页数
   * @property {Number} currentPage 当前页数
   * @property {String} total 总条数
   * @property {String} money 总金额
   */
  const list = [{ name: '全部', value: 'total' }, { name: '今天', value: 'today' }, { name: '昨天', value: 'yesterday' },
  { name: '本周', value: 'week' }, { name: '上周', value: 'lastweek' }, { name: '本月', value: 'month' }, { name: '上月', value: 'lastmonth' }]
  const popup = ref(null) //筛选弹框
  const makeOrder = ref('') //制单人/手机号
  const dataTimes = ref('全部') //筛选时间
  const time = ref('total')
  const single = ref('') //时间段
  const start = ref('') //开始时间
  const end = ref('') //结束时间
  const textList = ref([{ name: '全部', value: 'data', state: 'total', start: '', end: '' }, { name: '', value: 'makeOrder' }])

  const pageHeight = ref() //自定义高度
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const orderLists = ref([]);
  const total = ref('')
  const money = ref('')
  onMounted(() => {
    uni.getSystemInfo({
      success: function (res) {
        pageHeight.value = (res.windowHeight - 200).toString();
      },
    });
  });
  /**
   * 初始化获取加注订单列表
   * @param {Number} page  获取当前页加注数据
   * @param {String} start  开始时间
   * @param {String} end  结束时间
   * @param {String} time  筛选状态
   * @param {String} keywords  搜索信息
   */
  init()
  function init() {
    showLoading()
    isLoading.value = true;
    const data = textList.value.find((item) => item.value === 'data')
    const keywords = textList.value.find((item) => item.value === 'makeOrder').name
    const payload = {
      query: getOrderRechargeList,
      variables: {
        page: currentPage.value,
        start: data.start,
        end: data.end,
        time: data.state,
        keywords
      },
    };
    toPublish(
      'ql/control/getOrderRechargeList',
      payload,
      (obj : any) => {
        const { getOrderRechargeList } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getOrderRechargeList.list];
        lastPage.value = getOrderRechargeList.lastpage;
        total.value = getOrderRechargeList.total;
        money.value = getOrderRechargeList.money;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  //删除筛选信息
  function del(val : string) {
    textList.value.map((item) => {
      if (item.value === val) {
        switch (val) {
          case 'data':
            item.name = '全部'
            item.state = 'total'
            break;
          case 'makeOrder':
            item.name = ''
            break;
        }
      }
    })
    currentPage.value = 1;
    orderLists.value = [];
    init();
  }
  //切换时间段
  function changeDate(name : string, value : string) {
    dataTimes.value = name
    single.value = ''
    start.value = ''
    end.value = ''
    time.value = value
  }
  //自定义时间筛选
  function maskClick(e : any) {
    console.log(e)
    start.value = e[0]
    end.value = e[1]
    time.value = 'diy'
    dataTimes.value = ''
    single.value = e
  }
  //重置/确认
  function submit(num : string) {
    switch (num) {
      case '1':
        clear()
        break;
      case '2':
        popupClose()
        textList.value.map((item) => {
          switch (item.value) {
            case 'data':
              if (start.value) {
                item.name = start.value + '~' + end.value
              } else {
                item.name = dataTimes.value ? dataTimes.value : '全部'
              }
              item.state = time.value
              item.start = start.value
              item.end = end.value
              break;
            case 'makeOrder':
              item.name = makeOrder.value
              break;
          }
        })
        clear()
        currentPage.value = 1;
        orderLists.value = [];
        init();
        break;
    }
  }
  // 初始化数据
  function clear() {
    dataTimes.value = '全部'
    time.value = 'total'
    single.value = ''
    makeOrder.value = ''
    start.value = ''
    end.value = ''
  }
  function popupOpen() {
    popup.value.open()
  }
  function popupClose() {
    popup.value.close()
  }
</script>

<style scoped lang="less">
  .popups {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10px 10px 0px 0px;
    background-color: #fff;
  }

  .uni-input {
    width: 100%;
    background-color: #eee;
    border-radius: 30px;
    text-align: center;
    height: 70rpx;
  }

  .top {
    margin-top: 10rpx;
  }

  .tos {
    margin-top: 20rpx;
  }


  .but {
    padding: 5rpx 20rpx;
    box-sizing: border-box;
    background-color: #eee;
    border-radius: 30rpx;
    margin-top: 10rpx;
    margin-right: 10rpx;
  }

  .bur {
    width: 166rpx;
    height: 52rpx;
    background: #ECF0F6;
    border-radius: 26px;
    text-align: center;
    line-height: 52rpx;
    color: #666;
    margin-top: 15rpx;
    margin-right: 15rpx;
  }

  .bur:nth-child(4n) {
    margin-right: 0px;
  }

  .sure {
    margin-top: 40rpx;
    width: 341rpx;
    height: 78rpx;
    border: 2rpx solid #1B91FF;
    border-radius: 5px;
    box-sizing: border-box;
    text-align: center;
    line-height: 78rpx;
    color: #1B91FF;
  }
</style>